<template>
	<view>
		<text>uni-scss使用 </text>
		<text>在文件uni.scss引入@import '@/uni_modules/uni-scss/variables.scss';</text>
		<text>在uni-scss自定义了样式需要重启应用</text>
	</view>

	<view class="flex-box">
		<view class="box"></view>
		<view class="box1"></view>
		<view class="box2" style="color:$uni-success">qweqwe</view>
		<view class="box0 uni-success"></view>
	</view>

</template>

<script setup>

</script>

<style lang="scss">
	.box0 {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid black;
	}

	.box {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid black;
		background-color: $uni-color-primary; //使用根目录文件下的uni.scss文件中定义的样式
	}

	.box1 {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid black;
		background-color: $uni-success; //使用uni_modules/uni-scss/variables.scss文件下定义的样式
	}

	.box2 {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid black;
		background-color: $uni-color-red;
	}


	.flex-box {
		display: flex;
		align-items: center;
		justify-content: space-around;

	}
</style>